import QtQuick 2.0
import QtQuick.Layouts 1.14
import QtMultimedia 5.14
import Qt.labs.platform 1.1
import QtQuick.Controls 2.14
import "../component"

Item {
    id:root
    property string  pageColor : '#CECDCD'
    property string  recSelectColor: '#1989FA'
    property bool    isStart: false

    //设置音频
    MediaPlayer {
        id: playMusic1
        source: "qrc:/music/click1.mp3"
    }

    //设置音频
    MediaPlayer {
        id: playMusic2
        playbackRate: 2
        source: "qrc:/music/click3.mp3"
    }

    Connections{
        target: clothStyleObj
        onSizeStyleChanged:{
            clothStylelogoText.visible = false;
            clothStyleRec.visible = true
        }
    }

    RowLayout{
        anchors.fill: parent
        spacing: 0
        Rectangle{
           color: pageColor
           Layout.fillWidth : true
           Layout.fillHeight : true

           RowLayout{
               anchors.fill: parent
               Image {
                   id: clothImg
                   source: "qrc:/imgs/cloth.png"

                   Image {
                       id:clothStylelogoText
                       source: "qrc:/imgs/CALCA.png"
                       anchors.centerIn: parent
                   }

                   Rectangle{
                       id:clothStyleRec
                       visible: false
                       width: clothStyleObj.sizeStyle === 3 ? 210 : 200
                       height: clothStyleObj.sizeStyle === 3 ? 300 : 280
                       anchors.centerIn: parent

                       ExClothStyle{
                           anchors.fill: parent
                       }
                   }
               }
           }
        }

        Rectangle{
           color: pageColor
           Layout.fillWidth : true
           Layout.fillHeight : true

           ColumnLayout{
               anchors.fill:parent

               Rectangle{
                   width:380
                   height:380
                   color: 'transparent'
                   Layout.topMargin: 25
                   Layout.bottomMargin: 25
                   Layout.alignment:Qt.AlignHCenter | Qt.AlignCenter

                   GridLayout{
                       anchors.fill: parent
                       columnSpacing: 0
                       rowSpacing: 0
                       columns: 3
                       rows: 3

                        Rectangle{
                            Layout.row:0
                            Layout.column:1
                            color: 'transparent'
                            width: parent.parent.width /3
                            height: parent.parent.height /3

                            Image {
                                source: "qrc:/imgs/topMove.png"
                                anchors.centerIn: parent
                            }

                            MouseArea {
                                 anchors.fill: parent
                                 onPressed: {
                                     //playMusic1.play();
                                     parent.y-=3
                                     printControl.motorMoveForward(true);
                                 }
                                 onReleased: {
                                     parent.y+=3
                                     printControl.motorMoveForward(false);
                                 }
                             }
                        }

                        Rectangle{
                            Layout.row:1
                            Layout.column: 0
                            color: 'transparent'
                            width: parent.parent.width /3
                            height: parent.parent.height /3

                            Image {
                                source: "qrc:/imgs/leftMove.png"
                                anchors.centerIn: parent
                            }

                            MouseArea {
                                 anchors.fill: parent
                                 onPressed: {
                                     //playMusic1.play();
                                     parent.x-=3
                                     printControl.motorMoveLeft(true);
                                 }
                                 onReleased: {
                                     parent.x+=3
                                     printControl.motorMoveLeft(false);
                                 }
                             }
                        }

                        Rectangle{
                            Layout.row:1
                            Layout.column: 1
                            color: 'transparent'
                            width: parent.parent.width /3
                            height: parent.parent.height /3

                            Image {
                                source: "qrc:/imgs/originPoint.png"
                                anchors.centerIn: parent

                                Image {
                                    source: "qrc:/imgs/O.png"
                                    anchors.centerIn: parent
                                }
                            }

                            MouseArea {
                                 anchors.fill: parent
                                 onPressed: {
                                     //playMusic1.play();
                                     parent.scale*=.95
                                     printControl.motorMoveOrigin()
                                 }
                                 onReleased: {
                                     parent.scale/=.95
                                 }
                             }
                        }

                        Rectangle{
                            Layout.row:1
                            Layout.column: 2
                            color: 'transparent'
                            width: parent.parent.width /3
                            height: parent.parent.height /3

                            Image {
                                source: "qrc:/imgs/rightMove.png"
                                anchors.centerIn: parent
                            }

                            MouseArea {
                                 anchors.fill: parent
                                 onPressed: {
                                     //playMusic1.play();
                                     parent.x += 3
                                     printControl.motorMoveRight(true);
                                 }
                                 onReleased: {
                                     parent.x -= 3
                                     printControl.motorMoveRight(false);
                                 }
                             }
                        }

                        Rectangle{
                            Layout.row:2
                            Layout.column: 1
                            color: 'transparent'
                            width: parent.parent.width /3
                            height: parent.parent.height /3

                            Image {
                                source: "qrc:/imgs/bottomMove.png"
                                anchors.centerIn: parent
                            }

                            MouseArea {
                                 anchors.fill: parent
                                 onPressed: {
                                     //playMusic1.play();
                                     parent.y += 3
                                     printControl.motorMoveBack(true)
                                 }
                                 onReleased: {
                                     parent.y -= 3
                                     printControl.motorMoveBack(false)
                                 }
                             }
                        }
                   }
               }

               Rectangle{
                   width:466
                   height:100
                   color: 'transparent'
                   Layout.bottomMargin: 65
                   Layout.alignment:Qt.AlignHCenter | Qt.AlignCenter

                   RowLayout{
                       anchors.fill: parent
                       spacing: 22
                       property int childWidth: 100
                       property int childHeight: 100

                       //开始、暂停
                       Rectangle{
                           id:startBtn
                           width:parent.childWidth
                           height: parent.childHeight
                           radius: 10
                           color: 'transparent'
                           property int status: printControl.startBtnStatus   //开始 | 暂停 | 继续
                           Image {
                               anchors.fill: parent
                               source: startBtn.status === 2 ? "qrc:/imgs/pause.png":"qrc:/imgs/start.png"
                           }

                           MouseArea {
                                anchors.fill: parent
                                onPressed: {
                                    printControl.startPrint(startBtn.status);
                                    root.isStart = !root.isStart;
                                    parent.scale*=.95
                                }
                                onReleased: {
                                    parent.scale/=.95
                                }
                            }
                       }

                       //取消
                       Rectangle{
                           width:parent.childWidth
                           height: parent.childHeight
                           radius: 10
                           color: 'transparent'

                           Image {
                               id: name3
                               anchors.fill: parent
                               source: "qrc:/imgs/cancle.png"
                           }

                           MouseArea {
                                anchors.fill: parent
                                onPressed: {
                                    //playMusic2.play();
                                    printControl.cancelPrint();
                                    parent.scale*=.95
                                }
                                onReleased: {
                                    parent.scale/=.95
                                }
                            }
                       }

                       //清洗
                       Rectangle{
                           id:cleanBtn
                           width:parent.childWidth
                           height: parent.childHeight
                           color: 'transparent'
                           radius: 10

                           Image {
                               anchors.fill: parent
                               source: "qrc:/imgs/clean.png"
                           }

                           MouseArea {
                               id:mouse
                                anchors.fill: parent
                                onPressed: {
                                    parent.scale*=.95
                                }
                                onReleased: {
                                    parent.scale/=.95
                                }

                                onClicked: {
                                    popupMenu.open()
                                    //popupMenu.x = mouse.x
                                    //popupMenu.y = mouse.y
                                }
                            }

                           Popup{
                               id: popupMenu
                               font.pixelSize: 20
                               anchors.centerIn: parent
                               background: Rectangle{
                                    color: "transparent"
                                    radius: 8
                                    opacity: .7
                               }
                               ExCleanBox{
                                   opacity: .9
                                   onCloseWin:{
                                       popupMenu.close()
                                   }
                               }
                               scale: .8
                               padding: 0
                           }
                       }

                       //测试
                       Rectangle{
                           width:parent.childWidth
                           height: parent.childHeight
                           color: 'transparent'
                           radius: 10

                           Image {
                               id: name4
                               anchors.fill: parent
                               source: "qrc:/imgs/test.png"
                           }

                           MouseArea {
                                anchors.fill: parent
                                onPressed: {
                                    //playMusic2.play();
                                    parent.scale*=.95
                                    printControl.testPrint()
                                }
                                onReleased: {
                                    parent.scale/=.95
                                }
                            }
                       }
                   }
               }

               Rectangle{
                   Layout.fillHeight : true
               }
           }
        }
    }
}
